<template>
  <div class="detail">
    <back></back>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detail.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="ext">
      <h5>{{ detail.basicInfo?.name }}</h5>
      <p>{{ detail.basicInfo?.characteristic }}</p>
      <section>
        <p>
          <span class="et_left">低价￥{{ detail.basicInfo?.minPrice }}</span>
          <!-- &#x3000; 中文的空格 -->
          <span>&#x3000;原价￥{{ detail.basicInfo?.originalPrice }}</span>
        </p>
        <span>库存{{ detail.basicInfo?.stores }}</span>
      </section>
    </div>
    <tab-cut @cut="tabCut"></tab-cut>
    <div v-if="showExt" v-html="detail.content"></div>
    <div v-else style="background: #fff">
      <van-empty description="暂无数据" />
    </div>
    <van-popup
      v-model:show="show"
      closeable
      round
      close-icon="close"
      position="bottom"
    >
    <div class="popup-top">
      <img :src="detail.basicInfo?.pic" alt="">
      <section>
         <p>{{detail.basicInfo?.name}}</p>
         <span>￥{{detail.basicInfo?.minPrice}}</span>
      </section>
    </div>
    <ul class="popup-center">
      <li v-for="(item,index) in detail.properties">
         <h5>{{item.name}}</h5>
         <ol>
           <!-- <li v-for="(n,i) in item.childsCurGoods" :class="{active:checkIds[index]==n.id}" @click="checkties(n,index)">
             {{n.name}}-{{index}}
           </li> -->
           <li v-for="(n,i) in item.childsCurGoods" :class="{active:checkIds.some(it => it == n.id)}" @click="checkties(n,index)">
             {{n.name}}-{{index}}
           </li>
         </ol>
      </li>
    </ul>
    <div class="popup-footer">
      <span>购买数量</span>
      <van-stepper v-model="buyNum" />
    </div>
    <van-button block type="danger">加入购物车</van-button>
    </van-popup>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon
        :icon="star ? 'star' : 'star-o'"
        @click="star = !star"
        :text="star ? '已收藏' : '收藏'"
        color="#ff5000"
      />
      <van-action-bar-button type="warning" text="立即购买" />
      <van-action-bar-button type="danger" text="加入购物车" @click="show=true"/>
    </van-action-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getDetail } from "../../api/secendPage/index";
import tabCut from "../../components/tabCut.vue";
import Back from "../../components/back.vue";
export default {
  components: { tabCut, Back },
  setup() {
    const route = useRoute();
    // console.log(route.params.id);
    // console.log(route.query);
    // this.$route.params.id
    // console.log(route.params.id);

    let id = route.params.id;
    const data = reactive({
      detail: {}, // 详情的数据
      showExt: true, // 默认显示商品介绍
      star: false, // 控制是否收藏变量
      show: false, // 购物车弹窗
      buyNum: 1, // 购买的数量
      checkIds: [0,0], // 选中的id
    });
    getDetail({ id: id }).then((res) => {
      // console.log(res);
      data.detail = res.data;
    });
    const tabCut = (i) => {
      // 切换的函数
      // console.log(i);
      //   if (i) // i 是 0 的话返回一个false 是其他任何数都会返回true
      //   data.showExt = !i
      data.showExt = i == 0 ? true : false;
    };

    const checkties = (val,i) => {
      //  data.checkId = val.id;
      // console.log(i);
      data.checkIds[i] = val.id;
      // console.log(data.checkIds);
    }
    return {
      ...toRefs(data),
      tabCut,
      checkties
    };
  },
};




</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
}
.van-swipe-item img {
  width: 100%;
  height: 375px;
}
.ext {
  font-size: 12px;
  background: #fff;
  overflow: hidden;
  padding: 10px;
  margin-top: -2px;
  h5 {
    font-size: 16px;
    margin: 15px 0;
  }
  & > p {
    margin: 10px 0;
    color: #b8b8b8;
  }
  section {
    color: #b8b8b8;
    display: flex;
    justify-content: space-between;
    .et_left {
      font-size: 14px;
      color: red;
    }
  }
}
.popup-top{
  display: flex;
  padding: 10px;
  font-size: 13px;
  img{
    height: 62px;
    width: 62px;
  }
  section{
    flex: 1;
    margin-left: 10px;
    p{
      margin-top: 10px;
    }
    span{
      display: block;
      margin-top: 20px;
      color: red;
    }
  }
}
.popup-center{
  border-top: 1px solid #ccc;
  padding: 10px;
  &>li{
    font-size: 14px;
    h5{
      line-height: 50px;
    }
    li{
        display: inline-block;
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin:0 0 10px 10px ;
    }
    .active{
      border-color: red;
    }
  }
}
.popup-footer{
  height: 80px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
}
</style>